import { log } from 'console';
<template>
    <div class="container">
        <div ref="domRef" class="big-screen">123</div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const domRef = ref(null);
const getScale = (w = 1920, h = 1080) => {
    const ww = window.innerWidth / w;
    const wh = window.innerHeight / h;
    console.log(ww, wh);
    return ww < wh ? ww : wh;
};

const setTransform = (element: HTMLElement) => {
    const scale = getScale();
    console.log(scale);
    element.style.transform = `translate(-50%, -50%) scale(${scale})`;
};

onMounted(() => {
    if (domRef.value) {
        const element = domRef.value as HTMLElement;
        setTransform(element);
        window.addEventListener("resize", () => {
            setTransform(element);
        });
    }
});
</script>

<style scoped>
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: bisque;
}

.big-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    background-color: #3b6af5;
}
</style>
